<template>
  <el-dialog
    :title="isEdit ? '修改员工' : '添加员工'"
    :visible.sync="dialogVisible"
    width="500px"
    :before-close="handleClose"
  >
    <el-form
      ref="editForm"
      :model="formData"
      :rules="formRules"
      label-width="100px"
    >
      <el-form-item label="账号：" prop="username">
        <el-input
          v-model="formData.username"
          placeholder="请输入账号"
          :disabled="isEdit"
        />
      </el-form-item>

      <el-form-item label="员工姓名：" prop="name">
        <el-input v-model="formData.name" placeholder="请输入员工姓名" />
      </el-form-item>

      <el-form-item label="手机号：" prop="phone">
        <el-input
          v-model="formData.phone"
          placeholder="请输入手机号"
          maxlength="11"
        />
      </el-form-item>

      <el-form-item label="性别：" prop="sex">
        <el-radio-group v-model="formData.sex">
          <el-radio label="1">男</el-radio>
          <el-radio label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="身份证号：" prop="idNumber">
        <el-input
          v-model="formData.idNumber"
          placeholder="请输入身份证号"
          maxlength="18"
        />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSave"
        >保存</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "EmployeeEditForm",
  props: {
    // 是否显示对话框
    visible: {
      type: Boolean,
      default: false,
    },
    // 表单数据
    formData: {
      type: Object,
      default: () => ({
        id: "",
        username: "",
        name: "",
        phone: "",
        sex: "1",
        idNumber: "",
      }),
    },
    // 加载状态
    loading: {
      type: Boolean,
      default: false,
    },
    // 是否为编辑模式
    isEdit: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    // 手机号验证规则
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入手机号"));
      } else if (!/^1[3-9]\d{9}$/.test(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };

    // 身份证号验证规则
    const validateIdNumber = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入身份证号"));
      } else if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback(new Error("请输入正确的身份证号"));
      } else {
        callback();
      }
    };

    return {
      formRules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        name: [
          { required: true, message: "请输入员工姓名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "姓名长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        idNumber: [
          { required: true, validator: validateIdNumber, trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit("update:visible", value);
      },
    },
  },
  methods: {
    // 关闭对话框
    handleClose() {
      this.dialogVisible = false;
      this.$refs.editForm.resetFields();
      this.$emit("close");
    },
    // 保存表单
    handleSave() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$emit("save", this.formData);
        } else {
          this.$message.warning("请完善表单信息");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 对话框样式
::v-deep .el-dialog {
  border-radius: 8px;

  .el-dialog__header {
    border-bottom: 1px solid #e4e7ed;
    padding: 15px 20px;

    .el-dialog__title {
      font-size: 16px;
      font-weight: 600;
    }
  }

  .el-dialog__body {
    padding: 20px;
  }

  .el-dialog__footer {
    border-top: 1px solid #e4e7ed;
    padding: 15px 20px;
  }
}

// 响应式布局
@media (max-width: 768px) {
  ::v-deep .el-dialog {
    width: 90% !important;
  }
}
</style>
